<template>
  <div class="mine-wrapper">
    <div class="top-box">
      <div class="cover"
        :style="{backgroundImage:`url(${  url?.titleSrc ? imageBase + url?.titleSrc:defaultTitleSrc})`}"
      ></div>
      <div class="info">
        <h5 class="nick-name">{{ user?.nickName || '' }}</h5>
        <p class="more">账号：{{ user?.userName }}</p>
      </div>
    </div>
    <div class="setting-box">
      <ul>
        <li @click="router.push('/setSystemColor')">
          <var-icon name="palette-outline" class="left-icon" />
          <label>主题色</label>
          <var-icon name="chevron-right" class="right-icon" />
        </li>
        <li  @click="handleLogout" class="mt1">
          <var-icon name="power" class="left-icon"/>
          <label>退出</label>
        </li>
      </ul>
    </div>
  </div>
  <var-snackbar :type="showMsgRef.type" v-model:show="showMsgRef.visible" :duration="1500">{{
    showMsgRef.type === 'success' ? '退出成功！' : '退出失败！'
  }}</var-snackbar>
</template>
<script setup name="Mine">
import {inject , ref } from 'vue'
import useSymbols from '../../compostions/useSymbols.js'
import { useRouter } from 'vue-router'
import defaultTitleSrc from '../../assets//imgs/banner/03.png';
const imageBase = import.meta.env.VITE_BASE_FILE_SRC;

const { getUserInfo , logout } = inject(useSymbols);
const user = getUserInfo();

const router = useRouter();

const showMsgRef = ref({
  visible: false,
  type: 'success',
});

// 退出
const handleLogout = async () => {
  await logout();
  showMsgRef.value.visible = true;
  setTimeout(() => {
    router.replace('/login')
  }, 1200);
}
</script>
<style scoped lang="less">
.mine-wrapper {
  width: 100%;
  .top-box {
    width: 100%;
    background-color: var(--system-primary-color);
    box-sizing: border-box;
    padding: 2.9rem 1rem 3rem 1rem;
    display: grid;
    grid-template-columns: 6rem 1fr;
    p,
    h5 {
      margin: 0;
      padding: 0;
      color: #fff;
    }
    .cover {
      border-radius: 50%;
      width: 4.5rem;
      height: 0;
      padding-bottom: 4.5rem;
      overflow: hidden;
      background-position: center center;
      background-repeat: no-repeat;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      background-size: cover;
      margin: 0 auto;
    }
    .nick-name {
      font-size: 1.1rem;
      line-height: 1.4rem;
      font-weight: 500;
      margin-top: .5rem;
    }
    .more {
      font-size: 0.9rem;
      line-height: 1.2rem;
      font-weight: 300;
      margin-top: .8rem;
    }
  }
  .setting-box {
    width: 100%;
    ul {
      width: 100%;
      margin: .5rem 0;
      padding: 0;
      li {
        background-color: #fff;
        padding: 0.9rem 1rem;
        display: grid;
        grid-template-columns: 1.4rem 1fr 1rem;
        .left-icon {
          color: var(--system-primary-color);
        }
        label {
          color: #555;
          font-size: 0.82rem;
        }
        .right-icon {
          color: #888;
        }
      }
    }
  }
}
.mt1{
  margin-top: .5rem;
}
</style>
